<script setup>
import { ref, onMounted } from 'vue';

const chartData = ref();
const chartOptions = ref();

// 插入图表
const setChartData = () => {
    const documentStyle = getComputedStyle(document.body);

    return {
        labels: ['A', 'B', 'C'],
        datasets: [
            {
                data: [540, 325, 702],
                backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
                hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
            }
        ]
    };
};
const setChartOptions = () => {
    const documentStyle = getComputedStyle(document.documentElement);
    const textColor = documentStyle.getPropertyValue('--text-color');

    return {
        plugins: {
            legend: {
                labels: {
                    usePointStyle: true,
                    color: textColor
                }
            }
        }
    };
};
onMounted(() => {
    chartData.value = setChartData();
    chartOptions.value = setChartOptions();
});
// 报表数据
const forms = ref([{ header: '运行状况检查', icon: 'pi pi-plus' }, { header: 'CPU 使用率' }, { header: '内存利用率' }, { header: '工作' }]);
// 删除报表事件
const handelDelete = (index) => {
    forms.value.splice(index, 1);
};
// 添加报表事件
const handelAdd = () => {
    addDialog.value = true;
    addData.value = {};
};
const addData = ref({});
const addDialog = ref(false);
const saveDialog = () => {
    // 新增时确认（深拷贝）
    const data = JSON.parse(JSON.stringify(addData.value));
    forms.value.push(data);
    addDialog.value = false;
};
</script>

<template>
    <div class="card relative">
        <h5>监测</h5>
        <!-- 添加报表 -->
        <i class="pi pi-plus absolute" style="top: 93px; left: 10px; z-index: 2; cursor: pointer" v-tooltip.bottom="{ value: '添加报表', autoHide: true }" @click="handelAdd()"></i>
        <!-- 选项卡视图 -->
        <TabView scrollable>
            <TabPanel v-for="(f, index) in forms" :key="index">
                <template #header>
                    <div class="flex align-items-center gap-2">
                        <span>({{ index + 1 }})</span>
                        <span class="font-bold white-space-nowrap">{{ f.header }}</span>

                        <Button icon="pi pi-trash" text v-tooltip.bottom="{ value: '删除报表', autoHide: true }" @click="handelDelete(index)" />
                    </div>
                </template>

                <!-- 绘图面板-card -->
                <div class="card" style="overflow: auto; max-height: 400px">
                    <Card>
                        <template #title> 绘图面板-小工具-1</template>
                        <template #content>
                            <div class="flex justify-content-center">
                                <Chart type="line" :data="chartData" :options="chartOptions" class="w-full md:w-20rem" />
                            </div>
                        </template>
                    </Card>
                </div>
            </TabPanel>
        </TabView>
    </div>

    <!-- 添加弹框 -->
    <Dialog v-model:visible="addDialog" modal header="Header">
        <template #header>
            <span class="font-bold white-space-nowrap">添加报表名</span>
        </template>
        <InputText id="value" type="text" v-model="addData.header"></InputText>
        <template #footer>
            <Button severity="info" outlined text label="Ok" icon="pi pi-check" @click="saveDialog()" autofocus />
        </template>
    </Dialog>
</template>
